<template>
	<!-- 场所注册 -->
	<view class="safe-nav-top">
		<u-navbar
			title="场所注册" 
			fixed
			autoBack 
		>
		</u-navbar>
		
		<div class="page-content">
			<div class="white-box" style="text-indent: 2em;">
				场所注册
			</div>
			
			<!-- 表单区域 -->
			<div class="form-box white-box">
				<u-form style="padding-left: 24rpx;" :model="form" ref="form" label-width="100" labelAlign="left">
					<u-form-item label="场所类型"  >
						<u-radio-group 
						    v-model="form.placeType"
						    placement="column">
							<u-radio 
								label="公共场所" :customStyle="{marginBottom: '8px'}"
								:name="1"
							>
							</u-radio>
							<u-radio 
								label="营运车辆" :customStyle="{marginBottom: '8px'}"
								:name="2"
							>
							</u-radio>
						</u-radio-group>
					</u-form-item>
					
					<u-form-item label="申请人姓名" prop="reqUsername"  required>
						<u-input v-model="form.reqUsername" clearable placeholder="请输入您的姓名" border="none"></u-input>
					</u-form-item>
					<u-form-item label="申请人手机号" prop="reqPhone" required>
						<u-input v-model="form.reqPhone" clearable placeholder="请输入手机号" border="none"></u-input>
						<u-button slot="right" type="primary">获取验证码</u-button>
					</u-form-item>
					<u-form-item label="验证码" prop="code" required>
						<u-input v-model="form.code" clearable placeholder="请输入验证码" border="none"></u-input>
					</u-form-item>
					<u-form-item label="申请人证件号" prop="reqIdCard" >
						<u-input v-model="form.reqIdCard" clearable placeholder="请输入证件号码" border="none"></u-input>
					</u-form-item>
					
					<!-- 公共场所 -->
					<template v-if="form.placeType === 1">
						<u-form-item label="公共场所名称" prop="placeName"  required>
							<u-input v-model="form.placeName" clearable placeholder="公共场所名称" border="none"></u-input>
						</u-form-item>
						<u-form-item label="行政区域" prop="areaCode"  required>
							<SysAreaSelect v-model="form.areaCode" :areaText.sync="form.areaName" />
						</u-form-item>
						<u-form-item label="详细地址" prop="areaAddress"  required>
							<u-input v-model="form.areaAddress" showWordLimit clearable placeholder="详细地址" border="none"></u-input>
						</u-form-item>
					</template>
					
					<!-- 营运车辆 -->
					<template v-if="form.placeType === 2">
						<u-form-item label="运营公司名称" prop="companyName"  required>
							<u-input v-model="form.companyName" clearable placeholder="运营公司名称" border="none"></u-input>
						</u-form-item>
						<u-form-item label="车辆类型" prop="carType" required @tap="showCarType = true" >
							<u-input v-model="form.carType" readonly placeholder="车辆类型" border="none"></u-input>
							<u-picker 
								:show="showCarType"  :columns="carTypeData"
								@cancel="showCarType = false"
								@close="showCarType = false"
								@confirm="onCarTypeConfirm"
							>
							</u-picker>
						</u-form-item>
						<u-form-item label="车牌号" prop="carNo"  required>
							<u-input v-model="form.carNo" clearable placeholder="车牌号" border="none"></u-input>
						</u-form-item>
						<u-form-item label="行政区域" prop=""  required>
							<SysAreaSelect v-model="form.areaCode" :areaText.sync="form.areaName" />
						</u-form-item>
					</template>
				</u-form>
			</div>
			
			<div class="white-box" style="padding: 36rpx 24rpx;"> 
				 <u-checkbox-group @change="onChangeAgreed"> 
				 	<u-checkbox :name="true" label="同意以上信息，同意区域管控。"></u-checkbox>
				 </u-checkbox-group>
			</div>
			
			<!-- 提交按钮 -->
			<u-button
				type="primary" size="large" @click="onSubmit" :disabled="!agreed"
				:loading="submitLoading" loadingText="正在提交..."
			>
				确定
			</u-button>
		</div>
		
		<!-- 底部信息 -->
		<PageFooter />
		
	</view>
</template>

<script>
	import PageFooter from '@/components/layout/PageFooter.vue';
	import SysAreaSelect from '@/components/sysArea/sysAreaSelect.vue';
	import { mapState, mapMutations } from 'vuex';
	
	export default {
		components: {
			PageFooter, SysAreaSelect
		},
		data() {
			return {
				// 当前操作类型，reg：注册，add：新增
				operType: 'add',
				// 车辆类型选择
				showCarType: false,
				carTypeData: [
					['长途客运汽车', '短途客运汽车', '公交车', '巡游出租车', '网约车']
				], 
				form: {
					placeType: 1,
					reqUsername: null,
					reqPhone: null,
					code: '1234',
					reqIdCard: null
				},
				// 表单校验
				rules: {
					userName: [
						{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }
					],
					phone: [
						{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
						{ message: '请输入正确的手机号', pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, trigger: ['blur', 'change'] },
					],
					code: [
						{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] }
					],
				},
				// 同意协议
				agreed: false,
				submitLoading: false,
			}
		},
		watch: {
			agreed(val){
				console.log('watch agreed', val);
			},
		},
		computed: {
			...mapState('user', {
				userInfo: 'userInfo',
			}),
		},
		onLoad(option) {
			console.log("option: ", option);
			this.operType = option.operType || "add";
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
			this.initUserInfo();
		},
		methods: {
			...mapMutations('user', {
				setUserInfo: 'setUserInfo',
				setTokenInfo: 'setTokenInfo',
			}),
			// 初始化用户信息
			initUserInfo(){
				let userInfo = this.userInfo;
				if (userInfo) {
					this.form.reqUsername = userInfo.nickname;
					this.form.reqPhone = userInfo.phone;
				}
			},
			// 同意按钮选项变化
			onChangeAgreed(value){
				this.agreed = value && value.length > 0 ? value[0] : false;
			},
			// 车辆类型选中
			onCarTypeConfirm(item){
				let value = item.value[0];
				console.log("vlaue: ", value);
				this.form.carType = value;
				this.showCarType = false;
			},
			//点击确定提交
			onSubmit(){
				if (this.agreed !== true) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					})
					return;
				}
				this.$refs.form.validate().then(res => {
					//校验通过
					// 1. loading效果
					this.submitLoading = true;
					// 2. 请求场所注册接口
					let form = this.form;
					console.log("form: ", form);
					return this.$api.codePlace.regPlace(form);
				}).then(res => {
					this.submitLoading = false;
					uni.showToast({
						title: '注册成功',
						icon: 'none'
					});
					
					// 如果是注册
					if (this.operType === 'reg') {
						// 保存个人信息，token信息至缓存
						let data = res.data;
						let userInfo = data.userInfo;
						let tokenInfo = data.tokenInfo;
						this.setUserInfo(userInfo);
						this.setTokenInfo(tokenInfo);
						
						// 跳转至健康码首页
						uni.redirectTo({
							url: '/pages/healthCode/healthCode'
						});
					} else {
						uni.navigateBack();
					}
				}).catch(e => {
					console.log("请求场所注册接口，业务错误：", e);
					this.submitLoading = false;
					
				});
			},
		}
	}
</script>

<style scoped>
	
	/* 白色背景 */
	.white-box{
		background-color: #FFFFFF;
		border-radius: 6rpx;
		padding: 24rpx;
		color: #666666;
		margin-bottom: 24rpx;
	}
</style>
